<script setup lang="ts">
import { useRouter } from 'vue-router';

import { Button, Result } from 'ant-design-vue';
import { LogOut, RefreshCw } from 'lucide-vue-next';

import { useAuthStore } from '#/store';

const router = useRouter();
const authStore = useAuthStore();

// 退出登录
async function handleLogout() {
  // authStore.logout() 内部已经处理了跳转到登录页，不需要再次调用 router.push
  await authStore.logout(false);
}

// 刷新页面
function handleRefresh() {
  location.reload();
}
</script>

<template>
  <div class="flex h-screen w-screen items-center justify-center bg-gray-50">
    <div class="max-w-2xl w-full px-4">
      <Result status="403" title="暂无访问权限" sub-title="您当前没有任何菜单权限，请联系管理员分配权限">
        <template #extra>
          <div class="flex justify-center gap-4">
            <Button type="primary" size="large" @click="handleLogout">
              <LogOut :size="16" class="mr-2" />
              退出登录
            </Button>
            <Button size="large" @click="handleRefresh">
              <RefreshCw :size="16" class="mr-2" />
              刷新页面
            </Button>
          </div>
        </template>

        <div class="mt-8 text-center text-gray-500">
          <p class="mb-2 font-medium">可能的原因：</p>
          <ul class="text-left inline-block space-y-2">
            <li>• 您的账号尚未分配任何角色</li>
            <li>• 您的角色没有配置任何菜单权限</li>
            <li>• 系统管理员尚未为您开通访问权限</li>
          </ul>
        </div>

        <div class="mt-6 text-center">
          <p class="text-sm text-gray-400">
            如需帮助，请联系系统管理员
          </p>
        </div>
      </Result>
    </div>
  </div>
</template>

<style scoped>
ul {
  list-style: none;
  padding: 0;
  text-align: left;
}
</style>

